<script>
    var userId;
    function nextPage(pageNo){
         $("#user-lisitng").load("<?= $this->baseURI(); ?>user/list/list/0/"+pageNo);
    }
    function updateForm(vlaue){
        value = $('#role').val();
        if(value == 'superadmin'){
            $('#department').attr("disabled", true); 
        }else{
            $('#department').attr("disabled", false); 
        }
    }
    function editUser(id){
        userId = id;
        $("#edit-user-form").load("<?= $this->baseURI(); ?>user/edit/index/"+id);
        $("#edit-user-form" ).dialog( "open" );
    }
    function deleteUser(id){
                
        $(function() {	
           
            $( "#dialog:ui-dialog" ).dialog( "destroy" );
            $( "#delete-confirm" ).dialog({
                resizable: false,
                height:200,
                modal: true,
                buttons: {
                    "Delete": function() {
                        $.ajax({
                            type: "POST",
                            url: "<?= $this->baseURI(); ?>user/delete/index/"+id,                            
                            success: function(msg){
                                $("#user-lisitng").load("<?= $this->baseURI(); ?>user/list/list");
                            }
                        }); 
                        $( this ).dialog( "close" );
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
            
        });
    }
    
    $(function() {		
        $( "#dialog:ui-dialog" ).dialog( "destroy" );        

        function updateTips( t ) {
            tips
            .text( t )
            .addClass( "ui-state-highlight" );
            setTimeout(function() {
                tips.removeClass( "ui-state-highlight", 1500 );
            }, 500 );
        }

        function checkLength( o, n, min, max ) {
            
            if ( o.val().length > max || o.val().length < min ) {
                o.addClass( "ui-state-error" );
                updateTips( "Length of " + n + " must be between " +
                    min + " and " + max + "." );
                return false;
            } else {
                return true;
            }
        }
        
        function checkEmpty( o, n, min, max ) {
            if ( o.val().length < 1 ) {
                o.addClass( "ui-state-error" );
                updateTips( n + " must not be between empty");
                return false;
            } else {
                return true;
            }
        }
        
        function checkPass( o, n, min, max ) {
            if ( o.val().length > 1 ) {
                if ( o.val().length > max || o.val().length < min ) {
                    o.addClass( "ui-state-error" );
                    updateTips( "Length of " + n + " must be between " +
                        min + " and " + max + "." );
                    return false;
                } else {
                    return true;
                }
            } else {
                return true;
            }
        }

        function checkRegexp( o, regexp, n ) {
            if ( !( regexp.test( o.val() ) ) ) {
                o.addClass( "ui-state-error" );
                updateTips( n );
                return false;
            } else {
                return true;
            }
        }
        
        function confirmPassword(p,cP){
            if ( p.val() != cP.val() ) {
                p.addClass( "ui-state-error" );
                cP.addClass( "ui-state-error" );
                updateTips( "Password and confirm Password are not equal" );
                return false;
            } else {
                return true;
            }
        }
        
        $( "#add-user-form" ).dialog({
            autoOpen: false,
            height: 290,
            width: 750,
            modal: true,
            buttons: {
                "Add": function() {
                    var bValid = true;
                    var fname = $( "#firstName" ),
                    lname = $( "#lastName" ),
                    email = $( "#email" ),
                    password = $( "#password" ),
                    cpassword = $( "#confirmPassword" ),
                    phone = $( "#phone" ),
                    cell = $( "#cell" ),
                    role = $( "#role" ),
                    department = $( "#department" )
                    allFields = $( [] ).add( fname ).add( lname ).add( email ).add( password ).add( cpassword ).add( phone ).add( cell ).add( role ).add( department ),
                    tips = $( ".validateTips" );
                    
                    allFields.removeClass( "ui-state-error" );

                    bValid = bValid && checkLength( fname, "first name", 3, 16 );
                    bValid = bValid && checkLength( lname, "last name", 3, 16 );
                    bValid = bValid && checkLength( email, "email", 6, 80 );
                    
                    bValid = bValid && checkEmpty( phone, "phone", 6, 80 );
                    bValid = bValid && checkEmpty( cell, "cell", 6, 80 );
                    bValid = bValid && checkEmpty( role, "role", 1, 16 );
                    bValid = bValid && checkEmpty( department, "department", 1, 16 );
                    
                    bValid = bValid && checkLength( password, "password", 6, 20 );
                    bValid = bValid && confirmPassword( password, cpassword );
                    
                    bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
                    

                    if ( bValid ) {
                        $.ajax({
                            type: "POST",
                            url: "<?= $this->baseURI(); ?>user/add",
                            data: ({firstName : fname.val(),lastName : lname.val(),email : email.val(),password:password.val(),confirmPassword:cpassword.val(),cell:cell.val(),phone:phone.val(),role:role.val(),department:department.val(),status:$('#status').val()}),
                            success: function(msg){
                                $("#user-lisitng").load("<?= $this->baseURI(); ?>user/list/list");
                            }
                        });                       
                        $( this ).dialog( "close" );
                        $('#add-user-form').html('');
                    }
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                    $('#add-user-form').html('');
                }
            },
            close: function() {
                $('#add-user-form').html('');
                //   allFields.val( "" ).removeClass( "ui-state-error" );
            }
        });
        
        $( "#edit-user-form" ).dialog({
            autoOpen: false,
            height: 290,
            width: 750,
            modal: true,
            buttons: {
                "Edit": function() {
                    var bValid = true;
                    var fname = $( "#firstName" ),
                    lname = $( "#lastName" ),
                    email = $( "#email" ),
                    password = $( "#password" ),                    
                    phone = $( "#phone" ),
                    cell = $( "#cell" ),
                    role = $( "#role" ),
                    department = $( "#department" )
                    allFields = $( [] ).add( fname ).add( lname ).add( email ).add( password ).add( phone ).add( cell ).add( role ).add( department ),
                    tips = $( ".validateTips" );
                    
                    allFields.removeClass( "ui-state-error" );

                    bValid = bValid && checkLength( fname, "first name", 3, 16 );
                    bValid = bValid && checkLength( lname, "last name", 3, 16 );
                    bValid = bValid && checkLength( email, "email", 6, 80 );
                    
                    bValid = bValid && checkEmpty( phone, "phone", 6, 80 );
                    bValid = bValid && checkEmpty( cell, "cell", 6, 80 );
                    bValid = bValid && checkEmpty( role, "role", 1, 20 );
                    bValid = bValid && checkEmpty( department, "department", 1, 50 );
                    
                    bValid = bValid && checkPass( password, "password", 6, 20 );
                    // bValid = bValid && confirmPassword( password, cpassword );
                    
                    bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
                    

                    if ( bValid ) {
                        $.ajax({
                            type: "POST",
                            url: "<?= $this->baseURI(); ?>user/edit/index/"+userId,
                            data: ({firstName : fname.val(),lastName : lname.val(),email : email.val(),password:password.val(),cell:cell.val(),phone:phone.val(),role:role.val(),department:department.val(),status:$('#status').val()}),
                            success: function(msg){
                                $("#user-lisitng").load("<?= $this->baseURI(); ?>user/list/list");
                            }
                        });                       
                        $( this ).dialog( "close" );
                        $('#edit-user-form').html('');
                    }
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                    $('#edit-user-form').html('');
                }
            },
            close: function() {
                $('#edit-user-form').html('');
                //   allFields.val( "" ).removeClass( "ui-state-error" );
            }
        });

    });

</script>
<div class="dataBoxOver">
    <div class="dataInnRep">
        <div class="dataInnTop" id="user-lisitng">
            <?php echo $this->render('list/list.phtml'); ?>
        </div>	
    </div>
</div>
<div id="add-user-form" title="Add User"></div>
<div id="edit-user-form" title="Edit User"></div>
<div id="delete-confirm" title="Delete User" style="display: none;">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This user will be permanently deleted. Are you sure?</p>
</div>